<template>
  <div>
    <el-dialog class="public-dialog" title="字段选择" width="520" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false" append-to-body>
      <el-tree ref="treeRef" v-model="value" :data="treeData" show-checkbox node-key="fieldShow" :props="defaultProps" default-expand-all :expand-on-click-node="false" />
      <template #footer>
        <el-button type="primary" @click="handleSave">保存模板</el-button>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="handleClose">返回</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import api from "./api"
// Store Get Delete
import { ElMessage, ElMessageBox } from "element-plus"
import XForm from "@/components/XForm/index.vue"
const returnClass = (data, node) => {
  if (!data.children?.[0]?.children?.length) {
    return "tree-view level-end"
  }
  return "tree-view"
}
const defaultProps = {
  children: "children",
  label: "title",
  // class: "tree-view",
  class: returnClass,
}
const value = ref([])
const treeData = ref([])
const modelValue = ref(false)

const emit = defineEmits(["submit", "query"])
const treeRef = ref()
const handleSave = () => {
  ElMessageBox.prompt("", "保存模板", {
    confirmButtonText: "保存",
    cancelButtonText: "取消",
    inputPattern: /./,
    inputErrorMessage: "模板名称不能为空",
  })
    .then(({ value }) => {
      let keys = treeRef?.value?.getCheckedKeys().filter(Boolean)
      handleClose()
      emit("submit", { keys, name: value })
    })
    .catch(() => {
      ElMessage({ type: "info", message: "取消保存" })
    })
}
const query = () => {
  let checkedKeys = treeRef?.value?.getCheckedKeys().filter(Boolean)
  emit("query", checkedKeys)
  handleClose()
}

const handleClose = () => {
  modelValue.value = false
}

/* 
  {
    columns: 当前列表所有可展示列
    columnsShow : 当前配置可现实列  空为全展示  
  }
*/
const open = ({ columns = {}, columnsShow = [] }) => {
  // console.log("treeData")
  // console.log(columns)
  treeData.value = [{ title: "全选", field: "", fieldShow: "", children: columns }]
  // columns
  // if (columnsShow.length) {
  //   treeRef?.value?.setCheckedKeys(columnsShow)
  // }
  treeRef?.value?.setCheckedKeys([])
  modelValue.value = true
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
:deep(.tree-view) {
  .el-tree-node__content {
    padding-left: 0 !important;
    // box-shadow: 0px 1px 0px 0px #eff3fe;
    box-shadow: 0px 1px 0px 0px var(--base-border-color);
    padding: 18px 0;
  }
  .el-tree-node__children {
    .el-tree-node__content {
      box-shadow: none;
      margin-top: 6px;
    }
    .tree-view {
      // box-shadow: 0px 1px 0px 0px #eff3fe;
      box-shadow: 0px 1px 0px 0px var(--base-border-color);

      .el-tree-node__children {
        // display: grid;
        // grid-template-columns: repeat(3, minmax(0, 1fr));

        .tree-view {
          box-shadow: none;
        }
      }
    }
  }

  .level-end {
    .el-tree-node__children {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .el-tree-node__expand-icon {
    display: none;
  }
}
</style>
